import React, { useEffect, useState } from 'react'
import { Row, Col } from 'antd'
import { backgroundObj } from '@/utils/utils'
import MoreComponents from '../MoreComponents'
import defaultImg from '../image/defaultImg.png'
import './index.less'
const RenderStyle = (props) => {
    const { data = {} } = props
    const { list = [], top, bottom, countType, goodsNameStatus, goodsDescStatus, priceFlag, oldPriceFlag } = data

    const [renderList, setRenderList] = useState([])
    useEffect(() => {
        if (list.length === 0) {
            setRenderList([
                {
                    cover: defaultImg,
                    goodsName: '此处显示商品名称'
                },
                {
                    cover: defaultImg,
                    goodsName: '此处显示商品名称'
                },
                {
                    cover: defaultImg,
                    goodsName: '此处显示商品名称'
                }
            ])
        }
        else {
            setRenderList(list)
        }
    }, [list.length])
    if (countType === 'list') {
        return <div className='wxPage_shop_style1'>
            {renderList.map((val, index) => {
                const { goodsName, cover, goodsDesc, oriPrice, price } = val
                return <div key={index} className='list-style-list'>
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                        <div className='item-image'>
                            <img style={{ width: '100%', height: '100%', objectFit: 'cover' }} src={cover || defaultImg}></img>
                        </div>
                    </div>

                    <div className='item-info'>
                        {goodsNameStatus !== 'none' && <div className={goodsNameStatus === 'one' ? 'item-info-titleOne' : 'item-info-title'}>{goodsName}</div>}
                        {goodsDescStatus !== 'none' && <div className={goodsDescStatus === 'one' ? 'item-info-descOne' : 'item-info-desc'}>{goodsDesc}</div>}
                        <div className='item-price'>
                            {priceFlag && <div style={{ color: '#ff5024' }} className=''>{price ? '¥' + price : '免费'}</div>}
                            {oriPrice && <div className='item-price-old'>¥{oriPrice}</div>}
                        </div>
                    </div>
                </div>
            })}
        </div>
    }
    else if (countType === 'bigImage') {
        return <div className='wxPage_shop_style2'>
            {renderList.map((val, index) => {
                const { goodsName, cover, goodsDesc, oriPrice, price } = val
                return <div key={index} className='list-style-list'>
                    <div className='item-image'>
                        <img style={{ width: '100%', height: '100%', objectFit: 'cover' }} src={cover || defaultImg}></img>
                    </div>
                    <div className='item-info'>
                        {goodsNameStatus !== 'none' && <div className={goodsNameStatus === 'one' ? 'item-info-titleOne' : 'item-info-title'}>{goodsName}</div>}
                        {goodsDescStatus !== 'none' && <div className={goodsDescStatus === 'one' ? 'item-info-descOne' : 'item-info-desc'}>{goodsDesc}</div>}
                        <div className='item-price'>
                            {priceFlag && <div style={{ color: '#ff5024' }} className=''>{price ? '¥' + price : '免费'}</div>}
                            {oriPrice && <div className='item-price-old'>¥{oriPrice}</div>}
                        </div>
                    </div>
                </div>
            })}
        </div>
    }
    else if (countType === 'twoList') {
        return <div className='wxPage_shop_style3'>
            {renderList.map((val, index) => {
                const { goodsName, cover, goodsDesc, oriPrice, price } = val
                return <div key={index} className='list-style-list'>
                    <div className='item-image'>
                        <img style={{ width: '100%', height: '100%', objectFit: 'cover' }} src={cover || defaultImg}></img>
                    </div>
                    <div className='item-info'>
                        {goodsNameStatus !== 'none' && <div className={goodsNameStatus === 'one' ? 'item-info-titleOne' : 'item-info-title'}>{goodsName}</div>}
                        {goodsDescStatus !== 'none' && <div className={goodsDescStatus === 'one' ? 'item-info-descOne' : 'item-info-desc'}>{goodsDesc}</div>}
                        <div className='item-price'>
                            {priceFlag && <div style={{ color: '#ff5024' }} className=''>{price ? '¥' + price : '免费'}</div>}
                            {oriPrice && <div className='item-price-old'>¥{oriPrice}</div>}
                        </div>
                    </div>
                </div>
            })}
        </div>
    } else if (countType === 'leftScroll') {
        return <div className='wxPage_shop_style4'>
            <div className='slide-area'>
                {renderList.map((val, index) => {
                    const { goodsName, cover, goodsDesc, oriPrice, price } = val
                    return <div key={index} className='list-style-list'>
                        <div className='item-image'>
                            <img style={{ width: '100%', height: '100%', objectFit: 'cover' }} src={cover || defaultImg}></img>
                        </div>
                        <div className='item-info'>
                            {goodsNameStatus !== 'none' && <div className={goodsNameStatus === 'one' ? 'item-info-titleOne' : 'item-info-title'}>{goodsName}</div>}
                            {goodsDescStatus !== 'none' && <div className={goodsDescStatus === 'one' ? 'item-info-descOne' : 'item-info-desc'}>{goodsDesc}</div>}
                            <div className='item-price'>
                                {priceFlag && <div style={{ color: '#ff5024' }} className=''>{price ? '¥' + price : '免费'}</div>}
                                {oriPrice && <div className='item-price-old'>¥{oriPrice}</div>}
                            </div>
                        </div>
                    </div>
                })}
            </div>

        </div>
    } else if (countType === 'threeList') {
        return <div className='wxPage_shop_style5'>
            {renderList.map((val, index) => {
                const { goodsName, cover, goodsDesc, oriPrice, price } = val
                return <div key={index} className='list-style-list'>
                    <div className='item-image'>
                        <img style={{ width: '100%', height: '100%', objectFit: 'cover' }} src={cover || defaultImg}></img>
                    </div>
                    <div className='item-info'>
                        {goodsNameStatus !== 'none' && <div className={goodsNameStatus === 'one' ? 'item-info-titleOne' : 'item-info-title'}>{goodsName}</div>}
                        {goodsDescStatus !== 'none' && <div className={goodsDescStatus === 'one' ? 'item-info-descOne' : 'item-info-desc'}>{goodsDesc}</div>}
                        <div className='item-price'>
                            {priceFlag && <div style={{ color: '#ff5024' }} className=''>{price ? '¥' + price : '免费'}</div>}
                            {oriPrice && <div className='item-price-old'>¥{oriPrice}</div>}
                        </div>
                    </div>
                </div>
            })}


        </div>
    }
}

const FormRender = (props) => {
    const { data = {} } = props
    const { list = [], paddingTop = 0, paddingLeft = 0, top = 0, bottom = 0, } = data
    return <div style={{ padding: `${paddingTop}px ${paddingLeft}px`, marginTop: top, marginBottom: bottom, }}>
        <MoreComponents {...props}></MoreComponents>
        <RenderStyle {...props}></RenderStyle>
    </div>
}
export default FormRender